<template>
    <!-- 筛选弹窗组件-->
    <div class="backgroundDialog" id="backgroundDialogId">
        <div class="typeArea">
            <div class="topClass">
                <div><button class="resetting-btn" @click="resetFilter">重置筛选</button></div>
                <div style="font-size: 18px;color: black"><p>筛选</p></div>
                <div><button class="resetting-btn" @click="openStrategyModal">保存策略</button></div>
            </div>
            <div id="myModal" class="saveStrategy-modal">
                <div class="saveStrategy-content">
                    <p class="title">保存策略</p>
                    <div class="inputDiv">
                        <p>策略名称：</p>
                        <input type="text" placeholder="请输入策略名称" v-model="strategyForm.name"/>
                    </div>
                    <div class="btnDiv" >
                        <button class="one" @click="closeStrategyModal">关闭</button>
                        <button class="two" @click="saveStrategyModal">保存</button>
                    </div>
                </div>
            </div>
            <div class="middleClass">
                <div class="tactics">
                    <div class="tactics-label"  @click="toggleContainer">已保存策略 {{ isContainerOpen ? '▼' : '▶' }}</div>
                    <div class="toggle-content" :class="{ 'open': isContainerOpen }">
                        <div class="content-item" :class="{ active: item.id === strategId }" v-for="(item, index) in strategies" @click="selectStrategy(item)">
                            {{item.name}}
                        </div>
                    </div>
                </div>
                <div class="market-selection">
                    <div class="market-label">地区：</div>
                    <div
                        class="market-tag"
                        :class="{ active: selectedMarket === 'ZH' }"
                        @click="selectMarket('ZH')"
                    >
                        <span class="flag-icon flag-icon-cn"></span>
                        <span>中国</span>
                    </div>
                    <div
                        class="market-tag"
                        :class="{ active: selectedMarket === 'HK' }"
                        @click="selectMarket('HK')"
                    >
                        <span class="flag-icon flag-icon-hk"></span>
                        <span>香港</span>
                    </div>
                    <div
                        class="market-tag"
                        :class="{ active: selectedMarket === 'US' }"
                        @click="selectMarket('US')"
                    >
                        <span class="flag-icon flag-icon-us"></span>
                        <span>美国</span>
                    </div>
                    <div
                        class="market-tag"
                        :class="{ active: selectedMarket === 'JP' }"
                        @click="selectMarket('JP')"
                    >
                        <span class="flag-icon flag-icon-jp"></span>
                        <span>日本</span>
                    </div>
                </div>
                <div class="filter-form">
                    <!-- EV筛选 -->
                    <div class="filter-item">
                        <label>市值(亿)</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.evMin"
                                @input="handleInput('ev')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.evMax"
                                @input="handleInput('ev')"
                            />
                        </div>
                        <div v-if="errors.ev" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- debt_ratio筛选 -->
                    <div class="filter-item">
                        <label>资产负债率</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.debtRatioMin"
                                @input="handleInput('debtRatio')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.debtRatioMax"
                                @input="handleInput('debtRatio')"
                            />
                        </div>
                        <div v-if="errors.debtRatio" class="error-message">请输入比最小值更大的值</div>
                    </div>
                    <!-- PE筛选 -->
                    <div class="filter-item">
                        <label>PE</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.peMin"
                                @input="handleInput('pe')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.peMax"
                                @input="handleInput('pe')"
                            />
                        </div>
                        <div v-if="errors.pe" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- ROE筛选 -->
                    <div class="filter-item">
                        <label>ROE(%)</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.roeMin"
                                @input="handleInput('roe')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.roeMax"
                                @input="handleInput('roe')"
                            />
                        </div>
                        <div v-if="errors.roe" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- 营收筛选 -->
                    <div class="filter-item">
                        <label>人均创收(万元)</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.revenueMin"
                                @input="handleInput('revenue')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.revenueMax"
                                @input="handleInput('revenue')"
                            />
                        </div>
                        <div v-if="errors.revenue" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- 利润筛选 -->
                    <div class="filter-item">
                        <label>人均创利(万元)</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.profitMin"
                                @input="handleInput('profit')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.profitMax"
                                @input="handleInput('profit')"
                            />
                        </div>
                        <div v-if="errors.profit" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- 人效筛选 -->
                    <div class="filter-item">
                        <label>人效(%)</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.profitRevenueMin"
                                @input="handleInput('profitRevenue')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.profitRevenueMax"
                                @input="handleInput('profitRevenue')"
                            />
                        </div>
                        <div v-if="errors.profitRevenue" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- roic筛选 -->
                    <div class="filter-item">
                        <!--            <label>股票PEG(市盈率/增长率)</label>-->
                        <label>ROIC</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.roicMin"
                                @input="handleInput('roic')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.roicMax"
                                @input="handleInput('roic')"
                            />
                        </div>
                        <div v-if="errors.roic" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- roic筛选 -->
                    <div class="filter-item">
                        <!--            <label>股票PEG(市盈率/增长率)</label>-->
                        <label>CROIC</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.croicMin"
                                @input="handleInput('croic')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.croicMax"
                                @input="handleInput('croic')"
                            />
                        </div>
                        <div v-if="errors.croic" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- roic筛选 -->
                    <div class="filter-item">
                        <label>ROCE</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.roceMin"
                                @input="handleInput('roce')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.roceMax"
                                @input="handleInput('roce')"
                            />
                        </div>
                        <div v-if="errors.roce" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- div_yield筛选 -->
                    <div class="filter-item">
                        <label>股息率</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.divYieldMin"
                                @input="handleInput('divYield')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.divYieldMax"
                                @input="handleInput('divYield')"
                            />
                        </div>
                        <div v-if="errors.divYield" class="error-message">请输入比最小值更大的值</div>
                    </div>

                    <!-- 上市年限筛选 -->
                    <div class="filter-item">
                        <label>上市年限(年)</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.ipoYearMin"
                                @input="handleInput('ipoYear')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.ipoYearMax"
                                @input="handleInput('ipoYear')"
                            />
                        </div>
                        <div v-if="errors.ipoYear" class="error-message">请输入比最小值更大的值</div>
                    </div>

<!--                    ============================-->
                    <!-- 毛利率筛选 -->
                    <div class="filter-item">
                        <label>毛利率</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.grossMarginMin"
                                @input="handleInput('grossMargin')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.grossMarginMax"
                                @input="handleInput('grossMargin')"
                            />
                        </div>
                        <div v-if="errors.grossMargin" class="error-message">请输入比最小值更大的值</div>
                    </div>
                    <!-- 净利率 -->
                    <div class="filter-item">
                        <label>净利率</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.netMarginMin"
                                @input="handleInput('netMargin')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.netMarginMax"
                                @input="handleInput('netMargin')"
                            />
                        </div>
                        <div v-if="errors.netMargin" class="error-message">请输入比最小值更大的值</div>
                    </div>
                    <!-- PE百分位 -->
                    <div class="filter-item">
                        <label>PE百分位</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.pePerMin"
                                @input="handleInput('pePer')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.pePerMax"
                                @input="handleInput('pePer')"
                            />
                        </div>
                        <div v-if="errors.pePer" class="error-message">请输入比最小值更大的值</div>
                    </div>
                    <!-- PB百分位 -->
                    <div class="filter-item">
                        <label>PB百分位</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.pbPerMin"
                                @input="handleInput('pbPer')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.pbPerMax"
                                @input="handleInput('pbPer')"
                            />
                        </div>
                        <div v-if="errors.pbPer" class="error-message">请输入比最小值更大的值</div>
                    </div>
                    <!-- PS百分位 -->
                    <div class="filter-item">
                        <label>PS百分位</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.psPerMin"
                                @input="handleInput('psPer')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.psPerMax"
                                @input="handleInput('psPer')"
                            />
                        </div>
                        <div v-if="errors.psPer" class="error-message">请输入比最小值更大的值</div>
                    </div>
                    <!-- PCF百分位 -->
                    <div class="filter-item">
                        <label>PCF百分位</label>
                        <div class="input-group">
                            <input
                                type="number"
                                placeholder="最小值"
                                v-model="form.pcfPerMin"
                                @input="handleInput('pcfPer')"
                            />
                            <span>~</span>
                            <input
                                type="number"
                                placeholder="最大值"
                                v-model="form.pcfPerMax"
                                @input="handleInput('pcfPer')"
                            />
                        </div>
                        <div v-if="errors.pcfPer" class="error-message">请输入比最小值更大的值</div>
                    </div>
                    <!-- 底部按钮 -->
                    <div class="filter-panel-footer">
                        <button class="selected-btn">已选择({{ activeFilterCount }})</button>
                        <button class="result-btn" @click="closeDrawer()">查看结果({{ total }})</button>
                    </div>
                </div>
            </div>
            <div class="belowClass">
            </div>
        </div>

    </div>
    <div class="overlay" id="overlay" @click="closeDrawer()"></div>
    <header>
        <div class="header">
            <div>
                <button>
                    <span class="iconfont icon-rank"></span>
                    <span>指标</span>
                </button>
            </div>
            <div>
                <h2>
                    股票筛选
                </h2>
            </div>
            <div>
                <button @click="IsShowFilterDialog">
                    <span class="iconfont icon-sousuo"></span>
                    <span>筛选</span>
                </button>
            </div>
        </div>
    </header>

    <div class="content">
        <div class="table-section">
            <table class="stock-table">
                <thead>
                <tr>
                    <th class="fixed-column">名称/代码</th>
                    <th @click="sortBy('ev')" style="cursor: pointer;">市值
                        <span v-if="sortStates.ev !== 0">
                        {{ sortStates.ev === 1 ? '▲' : sortStates.ev === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('debt_ratio')" style="cursor: pointer;">资产负债率
                        <span v-if="sortStates.debt_ratio !== 0">
                        {{ sortStates.debt_ratio === 1 ? '▲' : sortStates.debt_ratio === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('pe')" style="cursor: pointer;">PE
                        <span v-if="sortStates.pe !== 0">
                        {{ sortStates.pe === 1 ? '▲' : sortStates.pe === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('roe')" style="cursor: pointer;">ROE
                        <span v-if="sortStates.roe !== 0">
                        {{ sortStates.roe === 1 ? '▲' : sortStates.roe === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('revenue')" style="cursor: pointer;">人均创收
                        <span v-if="sortStates.revenue !== 0">
                        {{ sortStates.revenue === 1 ? '▲' : sortStates.revenue === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('profit')" style="cursor: pointer;">人均创利
                        <span v-if="sortStates.profit !== 0">
                        {{ sortStates.profit === 1 ? '▲' : sortStates.profit === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('profit_revenue')" style="cursor: pointer;">人效
                        <span v-if="sortStates.profit_revenue !== 0">
                        {{ sortStates.profit_revenue === 1 ? '▲' : sortStates.profit_revenue === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('roic')" style="cursor: pointer;">ROIC
                        <span v-if="sortStates.roic !== 0">
                        {{ sortStates.roic === 1 ? '▲' : sortStates.roic === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('croic')" style="cursor: pointer;">CROIC
                        <span v-if="sortStates.croic !== 0">
                       {{ sortStates.croic === 1 ? '▲' : sortStates.croic === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('roce')" style="cursor: pointer;">ROCE
                        <span v-if="sortStates.roce !== 0">
                        {{ sortStates.roce === 1 ? '▲' : sortStates.roce === 2 ? '▼' : '' }}
                        </span>
                    </th>

                    <th @click="sortBy('div_yield')" style="cursor: pointer;">股息率
                        <span v-if="sortStates.div_yield !== 0">
                        {{ sortStates.div_yield === 1 ? '▲' : sortStates.div_yield === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('ipo_year')" style="cursor: pointer;">上市年限
                        <span v-if="sortStates.ipo_year !== 0">
                        {{ sortStates.ipo_year === 1 ? '▲' : sortStates.ipo_year === 2 ? '▼' : '' }}
                        </span>
                    </th>

                    <th @click="sortBy('gross_margin')" style="cursor: pointer;">毛利率
                        <span v-if="sortStates.gross_margin !== 0">
                        {{ sortStates.gross_margin === 1 ? '▲' : sortStates.gross_margin === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('net_margin')" style="cursor: pointer;">净利率
                        <span v-if="sortStates.net_margin !== 0">
                        {{ sortStates.net_margin === 1 ? '▲' : sortStates.net_margin === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('pe_per')" style="cursor: pointer;">PE百分位
                        <span v-if="sortStates.pe_per !== 0">
                        {{ sortStates.pe_per === 1 ? '▲' : sortStates.pe_per === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('pb_per')" style="cursor: pointer;">PB百分位
                        <span v-if="sortStates.pb_per !== 0">
                        {{ sortStates.pb_per === 1 ? '▲' : sortStates.pb_per === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('ps_per')" style="cursor: pointer;">PS百分位
                        <span v-if="sortStates.ps_per !== 0">
                        {{ sortStates.ps_per === 1 ? '▲' : sortStates.ps_per === 2 ? '▼' : '' }}
                        </span>
                    </th>
                    <th @click="sortBy('pcf_per')" style="cursor: pointer;">PCF百分位
                        <span v-if="sortStates.pcf_per !== 0">
                        {{ sortStates.pcf_per === 1 ? '▲' : sortStates.pcf_per === 2 ? '▼' : '' }}
                        </span>
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr class="tr-column" v-for="(stock, index) in stocks" :key="index">
                    <td class="fixed-column">
                        <div class="stock-info">
                            <div class="stock-name">{{ stock.name }}</div>
                            <div class="stock-symbol">{{ stock.symbol }}</div>
                        </div>
                    </td>
                    <td>{{ stock.ev === null ? '--' : stock.ev }}</td>
                    <td>
                        {{ stock.debt_ratio === null ? '--' : stock.debt_ratio }}{{ stock.debt_ratio === '' ? '' : '%' }}
                    </td>
                    <td>{{ stock.pe }}{{ stock.pe === '' ? '' : 'X' }}</td>
                    <td >{{ stock.roe }}{{ stock.roe === '' ? '' : '%' }}</td>
                    <td>{{ stock.revenue }}</td>
                    <td >{{ stock.profit }}</td>
                    <td >
                        {{ stock.profit_revenue === null ? '--' : stock.profit_revenue }}
                    </td>
                    <td>{{ stock.roic === null ? '--' : stock.roic }}</td>
                    <td>{{ stock.croic === null ? '--' : stock.croic }}</td>
                    <td>{{ stock.roce === null ? '--' : stock.roce }}</td>
                    <td>{{ stock.div_yield === null ? '--' : stock.div_yield }}</td>
                    <td>{{ stock.ipo_date_year === null ? '--' : stock.ipo_date_year }}</td>
                    <td>{{ stock.gross_margin === null ? '--' : stock.gross_margin }}</td>
                    <td>{{ stock.net_margin === null ? '--' : stock.net_margin }}</td>
                    <td :class="getRateClass(stock.pe_per)">{{ stock.pe_per === null ? '--' : stock.pe_per }}{{ stock.pe_per === '' ? '' : '%' }}</td>
                    <td :class="getRateClass(stock.pb_per)">{{ stock.pb_per === null ? '--' : stock.pb_per }}{{ stock.pb_per === '' ? '' : '%' }}</td>
                    <td :class="getRateClass(stock.ps_per)">{{ stock.ps_per === null ? '--' : stock.ps_per }}{{ stock.ps_per === '' ? '' : '%' }}</td>
                    <td :class="getRateClass(stock.pcf_per)">{{ stock.pcf_per === null ? '--' : stock.pcf_per }}{{ stock.pcf_per === '' ? '' : '%' }}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 分页组件 -->
    <div class="pagination">
        <div class="pagination-info">
            共 {{ total }} 条记录
        </div>

        <div class="pagination-controls">
            <button class="page-btn" :disabled="currentPage === 1" @click="prevPage">上一页</button>
            <div class="page-numbers">
                <template v-for="page in displayPages" :key="page">
                    <button
                        v-if="page !== '...'"
                        class="page-number"
                        :class="{ active: currentPage === page }"
                        @click="goToPage(page)"
                    >
                        {{ page }}
                    </button>
                    <span v-else class="page-number">...</span>
                </template>
            </div>
            <button class="page-btn" :disabled="currentPage === totalPages" @click="nextPage">下一页</button>
        </div>

        <div class="pagination-size">
            每页显示:
            <select v-model="pageSize" @change="handlePageSizeChange">
                <option value="5">5条</option>
                <option value="10">10条</option>
                <option value="20">20条</option>
                <option value="50">50条</option>
            </select>
        </div>
    </div>
</template>

<script setup>
import {getPxList,apiSelectStrategy,apiSaveStrategy} from "@/api/FilterView";
import {ref, computed, reactive} from "vue";

const showFilterDialog = ref(false);
const strategies = ref([])
const strategId = ref(null)
const strategyForm = reactive({})
// 原始股票数据
const stocks = ref(0);
// 分页配置
const currentPage = ref(1);
const pageSize = ref(10); // 每页显示的数据条数
const total = ref(0); // 总条数
const pageSizeOptions = ref([5, 10, 20, 50]); // 可选的每页显示条数选项
const selectedMarket = ref('') // 默认不选中任何地区
// 排序配置
const sortKey = ref(null);
const sortStates = reactive({
})
const form = reactive({
    page: 1,
    page_size: 10,
    market: '',
    previousMarket: '', // 记录上次选择的市场，用于检测变化
    // peRange: [null, null],
    // roeRange: [null, null],
    // revenueRange: [null, null],
    // profitRange: [null, null],
    // netProfitRange: [null, null],
    // evRange: [null, null],
    // closeRange: [null, null],
    // ipoYearRange: [null, null],
    // pxCountRange: [null, null],
    // pegRange: [null, null],
    // profitRevenueRange: [null, null],
    // croicRange: [null, null],

});
const errors = reactive({})

// 计算当前已选择的筛选条件数量
const activeFilterCount = computed(() => {
    let count = 0;
    // 检查市场选择
    if (selectedMarket.value !== '') {
        count++;
    }
    // 检查所有范围字段
    const rangeFields = ['pe', 'roe', 'revenue', 'profit', 'profitRevenue',
                        'roic', 'croic', 'roce', 'ev', 'debtRatio', 'divYield',
                        'ipoYear', 'grossMargin', 'netMargin', 'pePer', 'pbPer',
                        'psPer', 'pcfPer'];
    rangeFields.forEach(field => {
        const minValue = form[field + 'Min'];
        const maxValue = form[field + 'Max'];
        // 如果最小值或最大值有一个不为null，就计数为一个筛选条件
        if ((minValue !== undefined && minValue !== null) && ( maxValue !== undefined && maxValue !== null))
        {
            count++;
        }
    });
    return count;
})

const sortedStocks = computed(() => {
    // 确保stocks.value不为null或undefined
    const stocksData = stocks.value || [];
    if (!sortKey.value) return stocksData;
    const order = sortStates[sortKey.value];
    return [...stocksData].sort((a, b) => {
        let valA = a[sortKey.value];
        let valB = b[sortKey.value];

        if (typeof valA === 'string' && valA.includes('%')) {
            valA = parseFloat(valA);
            valB = parseFloat(valB);
        }

        if (!isNaN(valA) && !isNaN(valB)) {
            return order === 'asc' ? valA - valB : valB - valA;
        } else {
            return order === 'asc'
                ? String(valA).localeCompare(String(valB))
                : String(valB).localeCompare(String(valA));
        }
    });
})
const totalPages = computed(() => {
    return Math.ceil(total.value / pageSize.value);
})

// 生成简化的页码数组，显示前三个、最后三个页码和中间的省略号
const displayPages = computed(() => {
    const total = totalPages.value;
    const current = currentPage.value;
    const pages = [];

    if (total <= 7) {
        // 如果总页数不超过7，显示所有页码
        for (let i = 1; i <= total; i++) {
            pages.push(i);
        }
    } else {
        // 显示前三个页码
        for (let i = 1; i <= 3; i++) {
            pages.push(i);
        }

        // 如果当前页码不在前5个和最后5个范围内，添加省略号和当前页码附近的页码
        if (current > 5 && current < total - 4) {
            pages.push('...');
            pages.push(current - 1);
            pages.push(current);
            pages.push(current + 1);
            pages.push('...');
        } else if (current > 3 && current <= 5) {
            // 如果当前页码在前5个范围内，添加中间的页码
            for (let i = 4; i < current; i++) {
                pages.push(i);
            }
            pages.push(current);
            pages.push('...');
        } else if (current >= total - 4 && current < total - 2) {
            // 如果当前页码在最后5个范围内，添加中间的页码
            pages.push('...');
            for (let i = current; i <= total - 3; i++) {
                pages.push(i);
            }
        } else {
            // 默认情况下，添加中间的省略号
            pages.push('...');
        }

        // 显示最后三个页码
        for (let i = total - 2; i <= total; i++) {
            // 避免重复添加页码
            if (!pages.includes(i)) {
                pages.push(i);
            }
        }
    }

    return pages;
})

const getRateClass = (value) => {
    // 去掉百分号并转换为数字
    const num = parseFloat(value);
    // if (isNaN(num)) return ''; // 非数字不加样式

    if (0 <= num && num < 25){
        return '';
    }else if (25 <= num && num < 50){
        return 'green-text';
    }else if (50 <= num && num < 75){
        return 'yellow-text';
    }else if (num >= 75){
        return 'red-text';
    }
};
const getList = (params) => {
    getPxList(params).then(response => {
        stocks.value = response.data.data.items;
        total.value = response.data.data.total;
    });
}
const getStrategy = () => {
    apiSelectStrategy().then(response => {
        strategies.value = response.data.data.items
    })
}

const selectStrategy = (item) => {
    strategId.value = item.id
    const obj = item.strategy?.tableColumns
    Object.keys(form).forEach(key => {
        delete form[key]
    })
    for (let i = 0; i < obj.length; i++) {
        form[obj[i].key] = obj[i].value
    }
    form.page = 1
    form.page_size = pageSize
    currentPage.value = 1; // 排序后回第一页
    form.sort_field = null
    form.sort_order = 0
    selectedMarket.value = form.market
    getList(form)
    // selectMarket(form.market)
}

const openStrategy = () => {
    // 检查表单是否有值
    const hasValue = Object.keys(form).some(key => {
        // 检查Min/Max字段是否有值
        if (key.endsWith('Min') || key.endsWith('Max')) {
            const value = form[key]
            return value !== null && value !== '' && value !== undefined
        }
        return false
    })

    // 如果没有值，提示用户
    if (!hasValue) {
        // 显示友好的提示信息而不是使用alert
        console.log('请至少选择一个指标再保存策略', 'warning')
        return false
    }else {
        return  true
    }
}

const openStrategyModal = () => {
    if(!openStrategy()) return
    const modal = document.getElementById('myModal');
    modal.classList.add('show');
}

const closeStrategyModal = () => {
    const modal = document.getElementById('myModal');
    modal.classList.remove('show');
}

const saveStrategyModal = () => {
    // 检查策略名称是否为空
    if (!strategyForm.name || strategyForm.name.trim() === '') {
        console.log('请填写策略名称', 'warning')
        return
    }
    const formStrategy = {
        name: strategyForm.name,
        strategy: [
        ]
    }
    Object.keys(form)
        .filter(key => key.endsWith('Max') || key.endsWith('Min'))
        .forEach(key => {
            formStrategy.strategy.push( {key, value: form[key]})
        });
    Object.keys(form)
        .filter(key => key.endsWith('Range'))
        .forEach(key => {
            formStrategy.strategy.push( {key, value: form[key]})
        });
    if(form.market!=='' && form.market!==null ){
        formStrategy.strategy.push( {key: 'market', value: form.market})
    }
    apiSaveStrategy(formStrategy).then(response => {
        console.log(response.data)
    })
    getStrategy()
    const modal = document.getElementById('myModal');
    modal.classList.remove('show');
}
getList(form);
getStrategy();
const sortBy = (key) => {
    if (sortKey.value !== key){
        sortStates[sortKey.value] = 0
    }
    // 如果再次点击同一列，就反转该列的排序方向
    const sortState = sortStates[key];

    if (sortState === undefined || sortState === 0){
        sortStates[key] = 1;
    }else if (sortState === 1){
        sortStates[key] = 2;
    }else{
        sortStates[key] = 0;
    }
    sortKey.value = key;
    form.page = 1
    currentPage.value = 1; // 排序后回第一页
    form.sort_field = key
    form.sort_order = sortStates[key]
    getList(form);
}
const nextPage = () => {
    if (currentPage.value < totalPages.value){
        currentPage.value++;
        form.page = currentPage.value
        getList(form);
    }
}
const prevPage = () => {
    if (currentPage.value > 1){
        currentPage.value--;
        form.page = currentPage.value
        getList(form);
    }
}
// 跳转到指定页
const goToPage = (page) => {
    currentPage.value = page
    form.page = currentPage.value
    getList(form);
}
// 处理每页显示条数变化
const handlePageSizeChange = () => {
    // 当每页显示条数变化时，重置为第一页
    currentPage.value = 1
    form.page = currentPage.value
    form.page_size = pageSize.value
    getList(form);
}
const IsShowFilterDialog = () => {
    document.getElementById('backgroundDialogId').classList.add('open');
    document.getElementById('overlay').classList.add('active');
}
const closeDrawer = () => {
    document.getElementById('backgroundDialogId').classList.remove('open');
    document.getElementById('overlay').classList.remove('active');
}
const validateRange = (field, minValue, maxValue) => {

    // 处理null值的情况
    minValue = minValue === null || minValue === undefined ? '' : minValue
    maxValue = maxValue === null || maxValue === undefined ? '' : maxValue
    // 如果两个值都为空，验证通过
    if (minValue === '' && maxValue === '') {
        return true
    }
    // 只有当两个值都有内容时才进行数值范围验证
    if (minValue !== '' && maxValue !== '') {
        const min = parseFloat(minValue)
        const max = parseFloat(maxValue)
        // 检查是否为有效数字
        if (!isNaN(min) && !isNaN(max)) {
            return max >= min
        }
        // 如果有一个不是有效数字，但两个都不为空字符串，则验证失败
        return false
    }
    // 如果只有一个值有内容，验证通过（允许单边筛选）
    return true
}
const handleInput = (field) => {
    const minField = field + 'Min'
    const maxField = field + 'Max'
// 使用字段本身作为错误字段标识
    const errorField = field
    errors[errorField] = !validateRange(field, form[minField], form [maxField])
// 确保表单字段是数字类型或null（空值）
    if (form[minField] === '') form[minField] = null
    if (form[maxField] === '') form[maxField] = null

    const filterField = field + 'Range'
    form[filterField] =  [form[minField], form[maxField]]
    currentPage.value = 1
    form.page = currentPage.value
    form.page_size = pageSize.value
    form.sort_field = null
    form.sort_order = 0
    sortStates[sortKey.value] = 0;
    getList(form);
}

// 重置所有筛选条件
const resetFilter = () => {
    // 重置表单中的所有范围字段
    const rangeFields = ['pe', 'roe', 'revenue', 'profit', 'profitRevenue',
                        'roic', 'croic', 'roce', 'ev', 'debtRatio', 'divYield',
                        'ipoYear', 'grossMargin', 'netMargin', 'pePer', 'pbPer',
                        'psPer', 'pcfPer'];

    // 重置所有Min和Max字段为null
    rangeFields.forEach(field => {
        form[field + 'Min'] = null;
        form[field + 'Max'] = null;
        form[field + 'Range'] = [null, null];
    });

    // 重置所有错误状态
    Object.keys(errors).forEach(key => {
        errors[key] = false;
    });

    // 重置市场选择
    selectedMarket.value = '';
    form.market = '';
    strategId.value = null;

    // 重置分页和排序
    currentPage.value = 1;
    form.page = 1;
    form.sort_field = null;
    form.sort_order = 0;
    sortKey.value = '';
    Object.keys(sortStates).forEach(key => {
        sortStates[key] = 0;
    });

    // 重新加载数据
    getList(form);
}

const selectMarket = (market) => {
    // 如果点击的是当前已选中的市场，则取消选中
    if (selectedMarket.value === market) {
        selectedMarket.value = ''
        form.market = ''
    } else {
        // 否则选中新的市场
        selectedMarket.value = market
        form.market = market || ''
    }

    // 执行查询
    form.page_size = pageSize.value
    form.sort_field = null
    form.sort_order = 0
    sortStates[sortKey.value] = 0;
    getList(form);
}

// 控制已保存策略容器的展开和收起
const isContainerOpen = ref(false);

const toggleContainer = () => {
    isContainerOpen.value = !isContainerOpen.value;
}
</script>

<style scoped>

.header {
    background-color: #fff;
    padding: 16px 0;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    column-gap: 15px;
}

/* 按钮样式设置 */
.header button {
    padding: 8px 16px; /* 内边距：上下8px，左右16px */
    margin: 0 30px; /* 外边距：左右各10px */
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #e3f8f8;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.header button:hover {
    border-color: #1890ff;
    color: #1890ff;
}

.content {
    overflow-y: auto;
    position: fixed; /* 固定在屏幕 */
    width: 97%; /* 宽度占屏幕宽度的 30% */
    bottom: 180px;
    top: 110px;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-section {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 100%;
    width: 100%;
}

.stock-table {
    border-collapse: collapse;
}

.stock-table th {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    padding: 12px 8px;
    text-align: center;
    color: #1890ff;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fafafa;
    position: sticky;
    top: 0;
    z-index: 2;
    white-space: nowrap;
}

/* 固定第一列 */
.stock-table th.fixed-column {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 3;
    background-color: #fafafa;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(0, 0, 0, 0.1);
}

.stock-table td.fixed-column {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: #fff;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1);
}

.stock-table th:hover {
    background-color: #f0f0f0;
}

.tr-column:nth-child(odd) {
    background-color: #f9f9f9;
}

.tr-column:hover {
    background-color: #f0f0f0;
}

.stock-table td {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 为表格行奇数行的固定列设置背景色 */
.tr-column:nth-child(odd) .fixed-column {
    background-color: #f9f9f9;
}

/* 为表格行悬停时的固定列设置背景色 */
.tr-column:hover .fixed-column {
    background-color: #f0f0f0;
}


.stock-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stock-name {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.stock-symbol {
    font-size: 12px;
    color: #999;
}


/* 分页组件样式 */
.pagination {
    position: fixed; /* 固定在屏幕 */
    width: 97%; /* 宽度占屏幕宽度的 30% */
    bottom: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pagination-info {
    color: #666;
    font-size: 14px;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-size {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
}

.pagination-size select {
    padding: 4px 8px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
}

.pagination-size select:focus {
    outline: none;
    border-color: #1890ff;
}

.page-btn {
    padding: 8px 16px;
    margin: 0 8px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.page-btn:hover:not(:disabled) {
    color: #1890ff;
    border-color: #1890ff;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-numbers {
    display: flex;
    align-items: center;
}

.page-number {
    width: 32px;
    height: 32px;
    margin: 0 4px;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-number:hover {
    color: #1890ff;
    border-color: #1890ff;
}

.page-number.active {
    background-color: #1890ff;
    color: #fff;
    border-color: #1890ff;
}

.smallFont {
    color: #999999;
    font-size: 12px;
}

.titleBlue {
    color: #1890ff;
}

.showFilterDialogAll {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
}

.filter-panel-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.backgroundDialog {
    position: fixed;
    top: 0;
    right: -100%; /* 初始在屏幕外 */
    width: 500px;
    height: 100%;
    background: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease;
    padding: 20px;
    z-index: 5;
}
.backgroundDialog.open {
    right: 0; /* 滑入屏幕 */
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;

    /* 遮罩的淡入淡出 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.typeArea {
    width: 100%;
    height: 100%;
    padding: 0px 20px;
    background-color: #fff;
    position: relative;
    overflow-x: auto;
}

.topClass {
    width: 100%;
    height: 8%;
    background-color: #fff;
    color: #1890ff;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 2px 0px #0000000d;
    position: relative
}

.filter-count {
    color: #4CAF50;
    font-weight: bold;
    font-size: 14px;
    padding: 5px 10px;
    background-color: #f0f8ff;
    border-radius: 12px;
    min-width: 120px;
    text-align: center;
    border: 1px solid #d9d9d9;
}

.market-selection {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px 0px;
    border-bottom: 2px solid #f0f0f0;
}

.tactics {
    padding: 20px 0px;
    border-bottom: 2px solid #f0f0f0;
}
.tactics-label {
    cursor: pointer;
    background: #fff;
    padding: 10px;
}
.toggle-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* 可选间距 */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
    overflow-y: auto;
}

.content-item{
    flex: 0 0 calc(45% - 15px); /* 考虑间距的宽度计算 */
    box-sizing: border-box;
    margin: 5px;
    padding: 15px 0px;
    background-color: #eeeeee;
    border: 1px solid #ddd;
    text-align: center;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-item:hover{
    border-color: #1890ff;
    color: #1890ff;
    background: #e6f7ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
    transform: translateY(-1px);
}

.content-item.active {
    border-color: #1890ff;
    color: #1890ff;
    background: #e6f7ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
}

.tactics .toggle-content.open {
    max-height: 200px;
}

.market-tag {
    padding: 8px 16px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    transition: all .3s ease;
    background: #fff;
}

.market-tag:hover {
    border-color: #1890ff;
    color: #1890ff;
    background: #e6f7ff;
}

.flag-icon {
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
}
.filter-item{
    margin-bottom: 20px;
}
.filter-item label{
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
    font-weight: 500;
}
.input-group{
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.input-group input{
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
}
input:focus {
    outline: none;
    border-color: #1890ff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
.filter-panel-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 2px solid #f0f0f0;
    background: #fff;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    max-width: 100%;
}
.selected-btn, .result-btn {
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    min-width: 130px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}
.selected-btn {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #e9ecef;
}

.selected-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
    background: #e6f7ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
    transform: translateY(-2px);
}

.resetting-btn{
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    min-width: 130px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}
.resetting-btn {
    background: #e9e9e9;
    color: #495057;
    border: 1px solid #e9ecef;
}

.resetting-btn:hover {
    border-color: #1890ff;
    color: #1890ff;
    background: #e6f7ff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);
    transform: translateY(-2px);
}

.selected-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.result-btn {
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    color: #fff;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.result-btn:hover {
    background: linear-gradient(135deg, #40a9ff, #65b4f0);
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
    transform: translateY(-2px);
}

.result-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.error-message {
    color: #ff4d4f;
    font-size: 12px;
    margin-top: 6px;
    line-height: 1.4;
}


.market-tag:hover {
    border-color: #1890ff;
    color: #1890ff;
    background: #e6f7ff;
}

.market-tag.active {
    background: #67b5fc;
    color: #fff;
    border-color: #1890ff;
    box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.saveStrategy-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 6;
}

.saveStrategy-content {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    height: 200px;
    width: 400px;
    border-radius: 8px;
}
.saveStrategy-content .title{
    font-size: 16px;
    height: 40px;
    text-align: center;
    line-height: 20px;
    border-bottom: 2px solid #f0f0f0;
}
.saveStrategy-content .inputDiv{
    display: flex;
    align-items: center;
    font-size: 16px;
    height: 100px;
    line-height: 20px;
    border-bottom: 2px solid #f0f0f0;
    padding-top: 10px;
}

.saveStrategy-content .inputDiv input{
    height: 50%;
    flex: 1;
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 14px;
}

.saveStrategy-content .btnDiv{
    display: flex;
    margin: 0 10px;
    margin-top: 10px;
    justify-content: space-between;
}

.saveStrategy-content .btnDiv button{
    height: 35px;
    width: 100px;
    background: #e9e9e9;
    color: #495057;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}
.saveStrategy-content .btnDiv .two{
    width: 100px;
    color: white;
    background: #40a9ff;
}

.btnDiv button:hover {
    box-shadow: 0 6px 16px rgba(134, 147, 159, 0.4);
    transform: translateY(-1px);
}
.saveStrategy-modal.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 480px) {
    /* 筛选弹窗适配 */
    .backgroundDialog {
    position: fixed;
    bottom: 0;
    left: 0;
    top: initial;
    width: 100%;
    height: 80%; /* 距离顶部预留20%的距离 */
    border-radius: 8px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    transform: translateY(100%); /* 初始在屏幕下方 */
    padding: 15px;
    z-index: 5;
    overflow-y: auto; /* 允许内容滚动 */
    box-sizing: border-box;
}

.backgroundDialog.open {
    transform: translateY(0); /* 从底部向上弹出 */
}

    /* 顶部栏适配 */
    .topClass {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .resetting-btn {
        padding: 10px 15px;
        font-size: 13px;
        min-width: 80px;
    }

    .topClass div:nth-child(2) {
        font-size: 16px;
    }

    /* 市场选择适配 */
    .market-selection {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 15px;
    }

    .market-label {
        width: 100%;
        margin-bottom: 5px;
    }

    .market-tag {
        padding: 8px 12px;
        font-size: 13px;
        flex: 1;
        min-width: 80px;
        text-align: center;
    }

    /* 筛选表单适配 */
    .filter-form {
        margin-bottom: 20px;
    }

    .filter-item {
        margin-bottom: 15px;
    }

    .filter-item label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .input-group {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        flex-wrap: wrap;
    }

    .input-group input {
        flex: 1;
        min-width: 0;
        padding: 8px 10px;
        font-size: 13px;
    }

    /* 保存策略弹窗适配 */
    .saveStrategy-content {
        width: 90%;
        max-width: 320px;
        height: auto;
        padding: 15px;
    }

    .saveStrategy-content .title {
        font-size: 15px;
        height: 35px;
    }

    .saveStrategy-content .inputDiv {
        height: auto;
        min-height: 80px;
        padding-top: 5px;
    }

    .saveStrategy-content .inputDiv input {
        height: 40px;
    }

    .saveStrategy-content .btnDiv button {
        height: 32px;
        width: 80px;
        font-size: 13px;
    }

    /* 结果列表适配 */
    .content {
        padding: 10px;
        border-radius: 4px;
    }

    .stock-table th,
    .stock-table td {
        padding: 8px 4px;
        font-size: 12px;
    }

    /* 分页组件适配 */
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 0;
    }

    .pagination-info,
    .pagination-size {
        font-size: 11px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
        margin: 8px 0;
    }

    .page-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .page-number {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    /* 固定第一列 */
    .stock-table th.fixed-column {
        width: 120px;
        min-width: 120px;
        max-width: 120px;
        position: sticky;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: #fafafa;
    }

    .stock-table td.fixed-column {
        position: sticky;
        left: 0;
        z-index: 2;
        background-color: #fff;
        box-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }

    .stock-info {
        padding: 4px 0;
    }

    .stock-name {
        font-size: 13px;
        margin-bottom: 2px;
    }

    .stock-symbol {
        font-size: 10px;
    }

    /* 筛选面板底部按钮适配 */
    .filter-panel-footer {
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }

    .selected-btn,
    .result-btn {
        padding: 10px 20px;
        font-size: 13px;
        min-width: 100%;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .content {
        padding: 15px;
        border-radius: 6px;
    }

    .stock-table th,
    .stock-table td {
        padding: 10px 6px;
        font-size: 14px;
    }

    .stock-symbol {
        font-size: 11px;
    }

    .pagination {
        padding: 12px 8px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .pagination-info,
    .pagination-size {
        font-size: 12px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-btn {
        padding: 6px 12px;
        margin: 0 4px;
        font-size: 12px;
    }

    .page-number {
        width: 28px;
        height: 28px;
        margin: 0 2px;
        font-size: 12px;
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .content {
        padding: 15px;
        border-radius: 6px;
    }

    .stock-table th,
    .stock-table td {
        padding: 10px 6px;
        font-size: 14px;
    }

    .stock-symbol {
        font-size: 11px;
    }

    .pagination {
        padding: 12px 8px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .pagination-info,
    .pagination-size {
        font-size: 12px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-btn {
        padding: 6px 12px;
        margin: 0 4px;
        font-size: 12px;
    }

    .page-number {
        width: 28px;
        height: 28px;
        margin: 0 2px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .content {
        padding: 10px;
        border-radius: 4px;
    }

    .stock-table th,
    .stock-table td {
        padding: 8px 4px;
        font-size: 12px;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .pagination-info,
    .pagination-size {
        font-size: 11px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .page-numbers {
        flex-wrap: wrap;
        justify-content: center;
        margin: 8px 0;
    }
}

.red-text {
    color: red;
}

.green-text {
    color: green;
}
.yellow-text {
    color: #faad14;
}
</style>
